import { Component, PureComponent } from 'react'
import ReactDOM from 'react-dom'
import Demo from './Demo.js'
import Demo2 from './Demo2.js'

//PureComponent纯组件
/*
性能优化：
1.PureComponent纯组件,浅层对比，基本数据类型,没有变不刷新页面
2.shouldComponentUpdate判断props和自己的数据state改变了没有
*/
class App extends PureComponent {
  state = {
    money: 100,
    ipt: '',
    msg: '',
    list: ['娜美', '罗宾', '亚丝娜'],
    current: 0
  }
  render() {
    console.log('父组件', 1);
    return <div>
      <h1>我是App组件</h1>
      <p>女朋友:{this.state.list[this.state.current]}</p>
      <button onClick={this.nClick}>女朋友按钮</button>
      <hr />
      <p>子传父的input值:{this.state.msg}</p>
      <input onChange={this.handleChange} value={this.state.ipt} type="text" placeholder='请输入名字' />
      <br />
      <button onClick={this.buy}>买烟</button>
      <Demo
        ipt={this.state.ipt}
        list={[1, 2, 3]}
        car='小黄车'
        money={this.state.money}
        check={true}>
      </Demo>
      <Demo2 fn={this.fn} car='小黄车' money={100} check={true}></Demo2>
    </div>
  }
  nClick = () => {
    this.setState({
      current: parseInt((Math.random() * this.state.list.length))
    })
  }
  buy = () => {
    this.setState({
      money: this.state.money - 10
    })
  }
  handleChange = (e) => {
    this.setState({
      ipt: e.target.value
    })
  }
  fn = (name) => {
    console.log(name);
    this.setState({
      msg: name
    })
  }
  // shouldComponentUpdate(nextProps, nextState) {
  //   if (this.state.current === nextState.current) {
  //     return false
  //   } else {
  //     return true
  //   }
  // }
}

ReactDOM.render(<App></App>, document.getElementById('root'))